import React, { Fragment } from 'react'
import './index.less'
import http from 'libs/http'
import { Icon } from 'antd'
import SubTitle from '../../components/SubTitle'
import { NoData, MediaPlayer } from 'components'

export default class extends React.Component {
  state = {
    courseId: null,
    courseName: '',
    courseType: 0, // 1-英语，3-编程
    detailsOne: [], // 课程资料
    detailsTwo: [], // 原声诵读
    level: null, // 等级
    pcPictureUrl: '', // pc图片地址
    platformType: '', // 2-直播，3-录播
    mediaShow: false,
    mediaTitle: '',
    mediaSrc: '',
    
  }

  componentDidMount() {
    const { courseId } = this.props.match.params
    this.getMaterialMore(courseId)
  }

  getMaterialMore = (courseId) => {
    http.get('/student/materials/more', { courseId }).then(res => {
      const {
        courseId,
        courseName,
        courseType, // 1-英语，3-编程
        detailsOne, // 课程资料
        detailsTwo, // 原声诵读
        level, // 等级
        levelStr,
        pcPictureUrl, // pc图片地址
        platformType, // 2-直播，3-录播
      } = res.data
      this.setState({ 
        courseId,
        courseName,
        courseType, // 1-英语，3-编程
        detailsOne, // 课程资料
        detailsTwo, // 原声诵读
        level, // 等级
        levelStr,
        pcPictureUrl, // pc图片地址
        platformType, // 2-直播，3-录播
      })
    })
  }
  handleClick = (fileName, name) => () => {
    this.setState({
      mediaShow: true,
      mediaTitle: name,
      mediaSrc: fileName
    })
  }

  // lookMaterial = (tableId, type) => () => {
  //   this.props.history.push(`/student_center_/material/${tableId}/${type}`)
  // }
  lookMaterial = (tableId, type) => () => {
    const winRef = window.open("", "_blank")
    setTimeout(() => {
      winRef.location = `/#/student_center_/material/${tableId}/${type}`
    }, 800);
  }

  onCancelMediaPlayer = () => {
    this.setState({ mediaShow: false, mediaSrc: '', mediaTitle: '' })
  }
  render() {
    const {
      courseId,
      courseName,
      courseType, // 1-英语，3-编程
      detailsOne, // 课程资料
      detailsTwo, // 原声诵读
      level, // 等级
      levelStr,
      pcPictureUrl, // pc图片地址
      platformType, // 2-直播，3-录播
      mediaTitle, 
      mediaShow, 
      mediaSrc
    } = this.state
    return (
      <div className="more-course-material">
        <div className="more-course-material-content">
          {
            <Fragment>
              <div className="course-name">
                <SubTitle 
                  title={courseName}
                  fontColor="#333"
                  fontWeight="600"
                />
                <span>课程等级：{levelStr}</span>
              </div>
              <div className="more-content">
                {
                  <Fragment>
                    <div className="more-item">
                      <p>课程资料</p>
                      <ul>
                        {
                          detailsOne.map(one => {
                            const {
                              name, hour,id
                            } = one
                            return (
                              <li onClick={this.lookMaterial(id, 1)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                            )
                          })
                        }
                      </ul>
                    </div>
                    {
                      courseType === 1 ? (
                        <div className="more-item">
                          <p>原声诵读</p>
                          <ul>
                            {
                              detailsTwo.map(two => {
                                const {
                                  name, hour, fileName
                                } = two
                                return (
                                  <li onClick={this.handleClick(fileName, name)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                                )
                              })
                            }
                          </ul>
                        </div>
                      ) : <div className="more-item">
                      <p>课程视频</p>
                      <ul>
                        {
                          detailsTwo.map(two => {
                            const {
                              name, hour, fileName
                            } = two
                            return (
                              <li onClick={this.handleClick(fileName, name)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                            )
                          })
                        }
                      </ul>
                    </div>
                    }
                  </Fragment>
                  
                }
              </div>
            </Fragment>
          }
        </div>
        <MediaPlayer
          src={mediaSrc}
          title={mediaTitle}
          show={mediaShow}
          onCancel={this.onCancelMediaPlayer}
        />
      </div>
    )
  }
}